<template>
  <div class="withdraw">
    <div class="withdraw_step">
      <div class="step_wrap">
        <el-steps :active="activeStep" finish-status="success" align-center>
          <el-step title="提交提现申请"></el-step>
          <el-step title="管理员受理"></el-step>
          <el-step title="提现成功"></el-step>
        </el-steps>
      </div>
      <div class="flex data_wrap">
        <div class="flex-1 flex">
          <img class="money_icon" src="../../assets/images/balance.png" alt="可提现金额">
          <div class="flex-1">
            <p class="money_data">￥{{ balance }}</p>
            <p class="color-999">可提现金额</p>
          </div>
        </div>
        <div class="flex-1 flex" style="border-left:1px solid #e6e6e6;">
          <img class="money_icon" src="../../assets/images/frozen.png" alt="冻结金额">
          <div class="flex-1">
            <p class="money_data">￥{{ frozen }}</p>
            <p>冻结金额</p>
          </div>
        </div>
      </div>
      <div class="info_wrap">
        <div class="warn-box">
          <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
          <p style="line-height:20px">提现说明！<br />1. 提现申请后，需要平台管理审核通过后自动转账到提现账户。<br />2. 请谨慎填写以免提现失败。</p>
        </div>
        <template v-if="activeStep == 0">
          <el-form :model="form" label-width="240px">
            <el-form-item label="提现方式:">
              <el-radio v-model="form.type" :label="1" @click.native='handleClick(1)'>
                <span class="pay_type">
                  <img style="width:25px;height:25px" src="../../assets/images/alipay.png" alt="支付宝">支付宝
                </span>
              </el-radio>
              <el-radio v-model="form.type" :label="2" @click.native='handleClick(2)'>
                <span class="pay_type">
                  <img style="width:20px;height:20px" src="../../assets/images/bankcard.png" alt="银行卡">银行卡
                </span>
              </el-radio>
            </el-form-item>
            <el-form-item label="提现信息:">
              <el-input v-model="form.user" disabled>
              </el-input>
              <p style="font-size:12px;line-height:1.5;margin-top:8px" class="red-font" v-if="!form.user">
                为了资金安全，首次提现需要绑定提现账号，请联系客服 020-89814314，添加，提现人或公司全称和账号</p>
            </el-form-item>
            <el-form-item label="提现金额:">
              <el-input placeholder="请输入提现金额" v-model="form.amount" @blur="changeMoneyInput()">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button v-if="$hasMethod('#recharge')" type="primary" size="medium" @click="submit">提交</el-button>
            </el-form-item>
            
          </el-form>
        </template>
        <template v-else>
          <div class="info_table">
            <h5>提交资料</h5>
            <div class="table_row">
              <p class="row_label">提现金额</p>
              <p class="color-666 row_value">￥{{ infoData.withdrawal_amount }}元</p>
            </div>
            <div class="table_row">
              <p class="row_label">收款方式</p>
              <p class="color-666 row_value">{{ infoData.pay_type }}</p>
            </div>
            <div class="table_row">
              <p class="row_label">收款账号</p>
              <p class="color-666 row_value">{{ infoData.payee_account }}</p>
            </div>
            <div class="table_row">
              <p class="row_label">收款人姓名</p>
              <p class="color-666 row_value">{{ infoData.payee_name }}</p>
            </div>
            <div class="table_row">
              <p class="row_label">提交时间</p>
              <p class="color-666 row_value">{{ infoData.apply_time }}</p>
            </div>
          </div>
          <div class="info_table">
            <h5>受理情况</h5>
            <div class="table_row">
              <p class="row_label">受理状态</p>
              <p class="row_value">
                <el-tag
                  :type="infoData.status == 1 ? '' : infoData.status == 2 ? 'success' : 'danger'">{{ infoData.status_name }}</el-tag>
              </p>
            </div>
            <div class="table_row">
              <p class="row_label">受理时间</p>
              <p class="color-666 row_value">{{ infoData.check_time ? infoData.check_time : '暂无' }}</p>
            </div>
            <div class="table_row" v-if="infoData.status == 3">
              <p class="row_label">原因</p>
              <p class="row_value">{{ infoData.refuse_reason }}</p>
            </div>
          </div>
          <p class="text-center">
            <el-button style="margin-left:20px" size="small" @click="$router.back()">返 回</el-button>
          </p>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { myAccount, getPayeeInfo, withdrawalApply, withdrawalInfo } from "@/api/account";
export default {
  data() {
    return {
      activeStep: 0,
      balance: 0,
      frozen: 0,
      form: {
        type: 1,
        user: '',
        amount: ''
      },
      infoData: {},
      bankname:'',
      alipayname:''
    }
  },
  props: ['withdrawId'],
  methods: {
    changeMoneyInput() {
      const pattern = /^[0-9]+([.]{1}[0-9]{1,2})?$/; // 正数的正则表达式
      // 不符合正整数时
      if (!pattern.test(this.form.amount)) {
        // input 框绑定的内容为空
        this.form.amount = '';
      }
    },
    handleClick(e){
      this.getAccount(e)
      this.form.type=e
      if(e==1){
        this.form.user=this.alipayname
      }else{
        this.form.user=this.bankname
      }
    },
    submit() {
      if (!this.form.user) {
        return;
      }
      if (this.form.amount <= 0) {
        this.$message({
          message: "提现金额不能为空，不能小于等于零",
          type: "warning"
        })
        return;
      }
      // const pos = String(this.form.amount).indexOf('.') + 1;
      // const num = String(this.form.amount).length - pos;
      // console.log(pos, num);
      // if (num > 2) {
      //   this.$message({
      //     message: "提现金额小数点后不能超过两位",
      //     type: "warning"
      //   })
      //   return;
      // }
      let params={
        amount:this.form.amount,
        type:this.form.type
      }
      console.log(params);
      withdrawalApply(params).then(res => {
        this.$router.push({ name: 'myWithdraw', params: { withdrawId: res.withdrawal_id } });
      })
    },
    getData() {
      myAccount().then(res => {
        const { balance, frozen } = res;
        this.balance = balance;
        this.frozen = frozen;
      })
    },
    getAccount(e) {
      this.activeStep = 0;
      this.form = {
        type: 1,
        user: '',
        amount: ''
      };
      getPayeeInfo().then(res => {
        const { payeename, alipayaccount,bankaccount,bankcreate,bankname } = res;
        if(e==undefined||e==1){
          this.form.user=alipayaccount + '（' + payeename + '）';
        }else{
          this.form.user=bankaccount + '（' + bankname + '）'+bankcreate;
        }
        // if (alipayaccount) {
        //   // this.form.user=alipayaccount + '（' + payeename + '）';
        //   this.alipayname=alipayaccount + '（' + payeename + '）';
        //   this.bankname=bankaccount + '（' + bankname + '）'+bankcreate;
        // }
      })
    },
    getInfo() {
      withdrawalInfo(this.withdrawId).then(res => {
        this.infoData = res && res.withdrawal_info ? res.withdrawal_info : {};
        console.log(this.infoData);
        this.activeStep = this.infoData.status == 2 ? 2 : 1;
      })
    }
  },
  mounted() {
    this.getData();
    if (this.withdrawId) {
      this.getInfo();
    } else {
      this.getAccount();
    }
  },
  watch: {
    $route(val) {
      console.log(val);
      if (this.withdrawId) {
        this.getInfo();
      } else {
        this.getAccount();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.info_table {
  border: 1px solid #eeeeee;

  h5 {
    height: 40px;
    background: #f5f5f5;
    color: #666666;
    text-align: center;
    line-height: 40px;
  }

  .table_row {
    display: flex;
    line-height: 38px;

    &+.table_row {
      border-top: 1px solid #eeeeee;
    }
  }

  .row_label {
    width: 125px;
    text-align: center;
    font-weight: bold;
    border-right: 1px solid #eeeeee;
  }

  &+.info_table {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .row_value {
    padding-left: 55px;
  }
}

.withdraw {
  background-color: #f3f6fb;
}

.withdraw_step {
  width: 800px;
  margin: auto;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

.step_wrap {
  padding: 30px 0;
  border-bottom: 1px solid #eeeeee;
}

.money_icon {
  width: 55px;
  height: 55px;
  margin-right: 15px;
}

.money_data {
  font-size: 25px;
  margin-bottom: 5px;
}

.data_wrap {
  border-bottom: 1px solid #eeeeee;

  &>div {
    padding: 28px 50px;
  }
}

.info_wrap {
  padding: 20px 50px;
}

.pay_type {
  img {
    vertical-align: middle;
    margin-right: 10px;
  }
}

/deep/.el-input.is-disabled .el-input__inner {
  color: #333333;
  background-color: #ffffff;
}

/deep/.el-step__icon {
  width: 40px;
  height: 40px;
  background-color: #999999;
  border-color: #999999;
  color: #ffffff;
}

/deep/.el-step__head.is-process .el-step__icon {
  background-color: $mainBlue;
  border-color: $mainBlue;
}

/deep/.el-step__head.is-success .el-step__icon {
  background-color: #ffffff;
  border-color: $mainBlue;
  color: $mainBlue;

  .el-step__icon-inner {
    font-size: 20px;
    font-weight: bold;
  }
}

/deep/.el-step__title {
  font-size: 14px;
  color: #333333;
  font-weight: normal;
}

/deep/.el-step__icon-inner {
  font-size: 16px;
}

/deep/.el-step.is-horizontal .el-step__line {
  height: 4px;
  background-color: #999999;
  left: 65%;
  right: -35%;
  top: 16px;
}
</style>